<template>
  <div class="recommend">
    <Title :title="title" :button="button"></Title>
    <div class="content">
      <div class="wrap">
        <Ranklist v-for="(v, i) in arr" :key="i + 339 * 2" :arr="v" />
      </div>
    </div>
  </div>
</template>

<script>
import Title from "../components/title.component.vue";
import Ranklist from "../components/ranklist.component.vue";
export default {
  data() {
    return {
      arr: [
        [
          {
            title: "浓缩蓝鲸",
            author: "- 裘德",
            songid: "10000",
            src: "	http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          },
          {
            title: "浓缩蓝鲸",
            author: "- 裘德",
            songid: "10000",
            src: "	http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          },
          {
            title: "浓缩蓝鲸",
            author: "- 裘德",
            songid: "10000",
            src: "	http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          },
        ],
        [
          {
            title: "浓缩蓝鲸",
            author: "- 裘德",
            songid: "10000",
            src: "	http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          },
          {
            title: "浓缩蓝鲸",
            author: "- 裘德",
            songid: "10000",
            src: "	http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          },
          {
            title: "浓缩蓝鲸",
            author: "- 裘德",
            songid: "10000",
            src: "	http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          },
        ],
        [
          {
            title: "浓缩蓝鲸",
            author: "- 裘德",
            songid: "10000",
            src: "	http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          },
          {
            title: "浓缩蓝鲸",
            author: "- 裘德",
            songid: "10000",
            src: "	http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          },
          {
            title: "浓缩蓝鲸",
            author: "- 裘德",
            songid: "10000",
            src: "	http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          },
        ],
      ],
      title: "排行榜",
      button: "更多",
    };
  },
  components: {
    Title,
    Ranklist,
  },
};
</script>

<style lang="less" scoped>
.recommend {
  margin-top: 0.01rem;
  height: 6.31rem;
  padding: 0.32rem 0 0.34rem 0.3rem;
  background-color: #fdf0f0;
  border-bottom-left-radius: 0.16rem;
  border-bottom-right-radius: 0.16rem;
  margin-bottom: 0.19rem;
  .content {
    overflow: auto;
    .wrap {
      display: flex;
    }
  }
}
/*隐藏滚动条*/
::-webkit-scrollbar {
  display: none;
}
</style>